<template>
  <div>
    <van-nav-bar title="账单详情">
      <img
        src="~assets/image/arrow_left.png"
        alt=""
        slot="left"
        width="20"
        height="20"
        @click="leftClick"
      />
    </van-nav-bar>
    <div class="count">
      <div>
        <img :src="img" width="20" height="20" alt="" />
        <span>{{ channelname }}</span>
        <sup>{{ rate | getRate }}</sup>
      </div>
      <p class="money">
        ￥ <span>{{ amount | getrealAmount }}</span>
      </p>
      <p class="type">订单状态:{{ statusType | statusType }}</p>
    </div>
    <div class="item">
      <p color="item-left">交易金额</p>
      <p class="item-money">{{ amount | getrealAmount }} 元</p>
    </div>
    <div class="item">
      <p color="item-left">手续费用</p>
      <p class="item-money">{{ extraFee | getrealAmount }} 元</p>
    </div>
    <div class="item">
      <p color="item-left">商品说明</p>
      <p class="item-money">{{ desc }}</p>
    </div>
    <div class="item">
      <p color="item-left">账单分类</p>
      <p class="item-money">{{ type | type }}</p>
    </div>
    <div class="item">
      <p color="item-left">创建日期</p>
      <p class="item-money">{{ createTime }}</p>
    </div>
    <div class="item">
      <p color="item-left">订单号</p>
      <p class="item-money">{{ ordercode }}</p>
    </div>
  </div>
</template>
<script>
export default {
  name: "OrderDetail",
  filters: {
    statusType(index) {
      let state = "";
      switch (index) {
        case "1":
          state = "已成功";
          break;
        case "2":
          state = "已取消";
          break;
        case "3":
          state = "待处理";
          break;
        case "4":
          state = "待处理";
          break;
      }
      return state;
    },
    type(index) {
      let type = "";
      switch (index) {
        case "0":
          type = "订单充值";
          break;
        case "1":
          type = "订单支付";
          break;
        case "2":
          type = "订单提现";
          break;
        case "4":
          type = "订单退款";
          break;
        case "5":
          type = "转账类型";
          break;
        case "6":
          type = "奖励发放";
          break;
        case "7":
          type = "信用卡还款";
          break;
        case "8":
          type = "信用卡还款账户充值";
          break;
        case "9":
          type = "信用卡管家首笔消费";
          break;
        case "10":
          type = "信用卡管家消费";
          break;
        case "11":
          type = "信用卡管家还款";
          break;
      }
      return type;
    },
    getrealAmount(money) {
      return parseFloat(money).toFixed(2);
    },
    getRate(rate) {
      return parseFloat(rate * 100).toFixed(2) + "%";
    },
  },
  data() {
    return {
      img: this.$route.params.img,
      channelname: this.$route.params.channelname,
      rate: this.$route.params.rate,
      amount: this.$route.params.amount,
      statusType: this.$route.params.statusType,
      extraFee: this.$route.params.extraFee,
      desc: this.$route.params.desc,
      type: this.$route.params.type,
      createTime: this.$route.params.createTime,
      ordercode: this.$route.params.ordercode,
    };
  },
  methods: {
    leftClick() {
      this.$router.back(-1);
    },
  },
};
</script>
<style scoped>
.count {
  margin-top: 2px;
  background-color: #fff;
  padding: 20px;
  text-align: center;
}
.count div span {
  font-weight: 600;
  color: #121212;
  margin: 0 5px;
}
p.money {
  font-size: 16px;
  margin: 8px 0;
  color: #444;
}
p.money span {
  color: #f08300c2;
  font-size: 22px;
}
p.type {
  font-size: 14px;
  margin: 8px 0;
  color: #999;
  font-weight: 600;
}
.item {
  margin-top: 2px;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 15px;
  font-size: 16px;
}
.item .item-money {
  color: #999;
  font-size: 14px;
}
p.item-left {
  color: #444;
}
</style>